<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CORS Test</title>
</head>
<body>
    <h1>CORS Test Page</h1>
    <button onclick="testGet()">Test GET /foo</button>
    <button onclick="testPost()">Test POST /foo/dto</button>
    <pre id="result"></pre>

    <script>
        const resultElement = document.getElementById('result');

        async function testGet() {
            try {
                const response = await fetch('http://localhost:8080/foo', {
                    method: 'GET',
                    credentials: 'include' // 测试带cookie的CORS
                });
                const data = await response.text();
                resultElement.textContent = 'GET Success: ' + data;
            } catch (error) {
                resultElement.textContent = 'GET Error: ' + error.message;
            }
        }

        async function testPost() {
            try {
                const response = await fetch('http://localhost:8080/foo/dto', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name: 'Test', age: 30 }),
                    credentials: 'include'
                });
                const data = await response.json();
                resultElement.textContent = 'POST Success: ' + JSON.stringify(data);
            } catch (error) {
                resultElement.textContent = 'POST Error: ' + error.message;
            }
        }
    </script>
</body>
</html>